<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 100px auto;
            text-align: center;
            width: 400px;
            height: 500px;
            background-color: brown;
        }

        .head {
            padding: 50px 0;
            color: white;
        }

        h1 {
            padding: 20px 0;
            color: aliceblue;
        }

        span {
            width: 40px;
            height: 40px;
            display: inline-block;
            background-color: black;
        }

        .content {
            /* padding: 40px 0; */
            font-size: 30px;
            color: aliceblue;
        }

        .content div {
            font-size: 40px;
            margin: 40px 0;

        }

        .content div span {
            font-size: 40px;
            margin-top: 10px;
            margin-right: 20px;
            background-color: brown;
        }

        .last {
            padding-top: 50px;
            color: aliceblue;
        }

        a {
            position: fixed;
            right: 0;
            bottom: 0;
            text-decoration: none;
            color: #000;
        }

        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head">现在的时间：</div>
        <h1>
            倒计时
        </h1>
        <div class="content">
            <div><span>18</span>天</div>
            <span class="text1">10</span> :
            <span class="text2">10</span> :
            <span class="text3">10</span>
        </div>
        <div class="last">
            截止时间: 2025年07月1日 10:00:00
        </div>
    </div>
    <div>
        <a href="首页.html">返回首页</a>

    </div>
    <script>
        const head = document.querySelector('.head')
        const last = document.querySelector('.last')
        const text1 = document.querySelector('.text1')
        const text2 = document.querySelector('.text2')
        const text3 = document.querySelector('.text3')
        const span = document.querySelector('.content div span')
        const now = +new Date()
        const future = (+new Date('2025-07-1 10:00:00'))
        const t = (future - now) / 1000
        d = parseInt(t / 60 / 60 / 24)
        span.innerHTML = `${d}`
        const ret = setInterval(function () {
            settime()
        }, 1000);
        function settime() {
            const now = +new Date()
            const future = (+new Date('2025-07-1 10:00:00'))
            const t = (future - now) / 1000
            if (t <= 0) {
                clearInterval(ret)
                text1.innerHTML = ' 00'
                text2.innerHTML = ' 00'
                text3.innerHTML = ' 00'
            }
            else {
                h = parseInt(t / 60 / 60 % 24)
                m = parseInt(t / 60 % 60)
                s = parseInt(t % 60)
                h = h < 10 ? '0' + h : h
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                text1.innerHTML = h
                text2.innerHTML = m
                text3.innerHTML = s
            }
        }
        settime()


        function getTime() {
            const date = new Date()
            year = date.getFullYear() > 9 ? date.getFullYear() : '0' + date.getFullYear()
            month = date.getMonth() > 9 ? date.getMonth() : '0' + date.getMonth()
            day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
            hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
            minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
            second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
            return `${year}年${+month + 1}月${day}日 ${hour}:${minute}:${second}`
        }
        head.innerHTML = `现在的时间：${getTime()}`
        setInterval(function () {
            head.innerHTML = `现在的时间：${getTime()}`
        }, 1000);
    </script>
</body>

</html>